<template>
	<view>
		<!-- 试题界面-->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
					<block slot="backText">返回</block>
					<block slot="content">考试界面</block>
		</cu-custom>
		
		<view v-if="!showexamcard">
		<view class="cu-form-group">
			<view class="title">学科id</view>
			<input placeholder="学科id" name="input" v-model="subjectid"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">单选数量</view>
			<input placeholder="单选数量" name="input" v-model="optionnum"></input>
		</view>
		<view >
			<button@click="GetExamlist()" >生成题目</button>
		</view>
			
		</view>
		<!--试题开始-->
		
		<view v-if="showexamcard">
		<view class="padding bg-white ">
			<view class="item">
			  <view class="timu">
			  <view>题目{{page+1}}</view>
			  <view>共{{examlist.length}}题</view>
			</view>
			</view>
			<view class="flex">
				<view class="cu-progress round">
					<view class="bg-green" :style="[{ width:loading}]"></view>
				</view>
				<text class=" text-green margin-left-sm"></text>
			</view>
			<view >{{examlist[page].title}}</view>
			
			<view class="item2" v-if="examlistcard[page] == 'A'"> 
			  <!--选过该题-->
			  <button type="primary" size="mini" class="btn" @click="dechooseanswer('A')"  data-choose='A' >A</button>	  
			  <view>{{examlist[page].optiona}}</view>  
			</view> 
			<view class="item2" v-if="examlistcard[page] != 'A' ">
			  <!--选过该题-->
			  <button type="info" size="mini" class="btn" @click="chooseanswer('A')"  data-choose='A' >A</button>	  
			  <view>{{examlist[page].optiona}}</view>  
			</view> 
			
			<view class="item2" v-if="examlistcard[page] == 'B'">
			  <!--选过该题-->
			  <button type="primary" size="mini" class="btn" @click="dechooseanswer('B')" >B</button>	  
			  <view>{{examlist[page].optionb}}</view>  
			</view> 
			<view class="item2" v-if="examlistcard[page] != 'B' " >
			  <!--选过该题-->
			  <button type="info" size="mini" class="btn" @click="chooseanswer('B')" >B</button>	  
			  <view>{{examlist[page].optionb}}</view>  
			</view> 
			
			<view class="item2" v-if="examlistcard[page] == 'C'">
			  <!--选过该题-->
			  <button type="primary" size="mini" class="btn" @click="dechooseanswer('C')" >C</button>	  
			  <view>{{examlist[page].optionc}}</view>  
			</view> 
			<view class="item2" v-if="examlistcard[page] != 'C' " >
			  <!--选过该题-->
			  <button type="info" size="mini" class="btn" @click="chooseanswer('C')"> C</button>	  
			  <view>{{examlist[page].optionc}}</view>  
			</view> 
			
			<view class="item2" v-if="examlistcard[page] == 'D'">
			  <!--选过该题-->
			  <button type="primary" size="mini" class="btn" @click="dechooseanswer('D')" >D</button>	  
			  <view>{{examlist[page].optiond}}</view>  
			</view> 
			<view class="item2" v-if="examlistcard[page] != 'D' " >
			  <!--选过该题-->
			  <button type="info" size="mini" class="btn" @click="chooseanswer('D')" >D</button>	  
			  <view>{{examlist[page].optiond}}</view>  
			</view> 
			
			
			
			
			</view>
			
			
		
		<view>
		<button@click="downpage()" >上一题</button>
		<button@click="uppage()">下一题</button>
		<button@click="commit()">提交</button>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				examlist:[
				      {"id":1,
					  "title":"请输入一加一的值",
					  "optiona":"1",
					  "optionb":"2",
					  "optionc":"3",
					  "optiond":"4",
					  "answer":"B"},
					  {"id":2,
					  "title":"请输入一加一的值",
					  "optiona":"1",
					  "optionb":"2",
					  "optionc":"3",
					  "optiond":"4",
					  "answer":"B"},
			
				
				  ],
				examlistcard:[
					
				],
				examlistid:[],
				  
				  page:0,
				  count:3,
				  subjectid:"",
				  showexamcard:false,
				  optionnum:"",
				  
			}
		},
		computed:{
			loading:function(){
				return (this.page+1/this.count)*100+"%"
				//return "75%"
			}
		},
		onLoad() {
			//初始化时候拉取信息
		},
		methods: {
			uppage(){
				
				//检查是否超限
				if(this.page == this.examlist.length-1){
					uni.showToast({
						title:"当前为最后一页",
						icon:"none"
					})
					return 
				}
				this.page = this.page +1
			},
			
			downpage(){
				
				if(this.page == 0){
					uni.showToast({
						title:"当前为第一页",
						icon:"none"
					})
					return 
				}
				this.page = this.page -1
			},
			chooseanswer(answer){
				this.examlistcard[this.page] = answer
                if(this.page!=0){
					this.downpage()
					this.uppage()
					return 
					
				}
				this.uppage()
				this.downpage()
			},
			dechooseanswer(answer){
				
				delete  this.examlistcard[this.page]
				console.log(this.examlistcard[this.page])
				
			},
			commit(){
				if(this.examlist.length != this.examlistcard.length){
					uni.showToast({
						title:'您还有试题未作答',
						icon:"none"
					})
					return
				}
				console.log(this.examlistcard)
				let correctcount = 0
				//检查正确率
				for(let i=0;i<this.examlist.length;i++){
					if(this.examlist[i].answer == this.examlistcard[i]){
						correctcount = correctcount + 1
						
					}
				}
				//向后端发送请求
				uni.request({
				url:"http://localhost/stuapi/StuUpdateCorrectlist",
				data:{
					corrct:correctcount,
					err:this.examlist.length-correctcount
				},
				method:"POST",
				header:{'content-type':'application/x-www-form-urlencoded'},
				success: (res) => {
				let code = res.data.code;
				console.log(res)
				if(code == 200){
					this.examlist = res.data.data
					this.showexamcard = true
				}
				else{
				}
				uni.showToast({ title:"答对了"+correctcount+"题",})
				
			},
			GetExamlist(){
				let that = this
				let studentid = uni.getStorageSync("id")
				
				uni.request({
				url:"http://localhost/stuapi/StuGetOptionlist",
				data:{
					Subjectid:this.subjectid,
					OptionExamNum:this.optionnum,
					studentid:studentid,
					ShortAnswerExamNum:0
				},
				method:"POST",
				header:{'content-type':'application/x-www-form-urlencoded'},
				success: (res) => {
				let code = res.data.code;
				console.log(res)
				if(code == 200){
					this.examlist = res.data.data
					this.showexamcard = true
				}
				else{
				}
				uni.showToast({ title:res.data.message, icon:"none",})
				} });
			}
			
		}
	}
</script>

<style>

	
	.item{
	  padding: 42rpx;
	  display: flex;
	  flex-direction: column;
	
	  
	}
	.item2{
	  padding: 42rpx;
	  display: flex;
	  flex-direction: row;
	  
	}
	.btn{
	  margin-left: 0px;
	  margin-right: 10px;
	}
	input{
	  border: 1rpx solid #000;
	  
	  
	  border-radius: 4px;
	}
	.exambuttons{
	  display: flex;
	}
	.btn1{
	  width:100%;
	  background-color:#FE4365;
	}
	.timu{
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	.baseflex{
	  display: flex;
	}


</style>
